<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>仪表盘 - Express</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <link rel="stylesheet" th:href="@{/public/assets/css/bootstrap.min.css}" href="../../public/assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" th:href="@{/public/assets/css/express.css}" href="../../public/assets/css/express.css"/>
</head>
<body>
    <input id="errorMsg" type="hidden" th:value="${errorMsg}" />
    <input id="orderId" type="hidden" th:value="${orderInfo?.id}" >
    <div class="container-fluid">
        <!-- 头部 -->
        <nav th:replace="common/nav::html"></nav>
        <!-- 主体 -->
        <div class="row">
            <!-- 左侧菜单 -->
            <div th:replace="common/sidebar::html"></div>
            <!-- 支付主体 -->
            <div class="col-md-10">
                <div class="alert alert-danger alert-dismissible fade in mt10" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <strong>请使用支付宝沙箱账号支付，其他账号无法支付！</strong>
                    APP下载地址：https://sandbox.alipaydev.com/user/downloadApp.htm
                    账号：uceskd4358@sandbox.com &nbsp;&nbsp; 登录、支付密码：111111<br>
                </div>
                <div class="row">
                    <div class="col-sm-7">
                        <h4>订单信息</h4>
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label for="expressName" class="col-sm-2 control-label">订单号</label>
                                <div class="col-sm-3">
                                    <p class="form-control-static" id="expressOrderId" th:text="${orderInfo?.id}"></p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="expressName" class="col-sm-2 control-label">服务类型</label>
                                <div class="col-sm-3">
                                    <p class="form-control-static" id="expressServiceType" th:text="${serviceType}"></p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="expressName" class="col-sm-2 control-label">姓名</label>
                                <div class="col-sm-3">
                                    <p class="form-control-static" id="expressName" th:text="${orderInfo?.recName}"></p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="expressTel" class="col-sm-2 control-label">联系电话</label>
                                <div class="col-sm-3">
                                    <p class="form-control-static" id="expressTel" th:text="${orderInfo?.recTel}"></p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="expressAddress" class="col-sm-2 control-label">快递寄达地址</label>
                                <div class="col-sm-3">
                                    <p class="form-control-static" id="expressAddress" th:text="${orderInfo?.address}"></p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="expressRecAddress" class="col-sm-2 control-label">收件地址</label>
                                <div class="col-sm-3">
                                    <p class="form-control-static" id="expressRecAddress" th:text="${orderInfo?.recAddress}"></p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="expressCompany" class="col-sm-2 control-label">快递公司</label>
                                <div class="col-sm-3">
                                    <p class="form-control-static" id="expressCompany" th:text="${companyName}"></p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="expressOdd" class="col-sm-2 control-label">快递单号</label>
                                <div class="col-sm-3">
                                    <p class="form-control-static" id="expressOdd" th:text="${orderInfo?.odd}"></p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="expressRemark" class="col-sm-2 control-label">备注</label>
                                <div class="col-sm-3">
                                    <p class="form-control-static" id="expressRemark" th:text="${orderInfo?.remark}"></p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="expressRemark" class="col-sm-2 control-label">总价</label>
                                <div class="col-sm-3">
                                    <p class="form-control-static" id="expressPrice" th:text="${price} + '元'"></p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="expressRemark" class="col-sm-2 control-label">支付状态</label>
                                <div class="col-sm-3">
                                    <p class="form-control-static" id="payStatus" th:text="${payStatus}"></p>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div th:if="${payStatus == '等待支付'}">
                        <div  class="col-sm-5">
                            <h4>支付方式（在线方式至少付款0.01元）</h4>
                            <form class="col-sm-12" method="post">
                                <button class="btn btn-info" type="button" onclick="alipay()" style="width: 200px;margin-bottom: 20px;">支付宝支付</button>
                            </form>
                            <form class="col-sm-12" id="wechatForm" action="#" method="post">
                                <button class="btn btn-default" type="button" disabled style="width: 200px;">微信支付</button>
                            </form>
                        </div>
                    </div>
                    <div th:if="${payStatus == '支付成功'}">
                        <div  class="col-sm-5">
                            <h4>恭喜！你已完成支付</h4>
                        </div>
                    </div>
                </div>
                <!--<div class="row" style="margin-bottom: 100px">-->
                    <!--<h4>支付方式（在线方式至少付款0.01元）</h4>-->
                    <!--<form class="form-inline col-sm-2" id="alipayForm" action="/order/alipay" method="post">-->
                        <!--<input type="hidden" id="alipayMoney" name="money">-->
                        <!--<button class="btn btn-info" type="button" onclick="alipay()">支付宝支付</button>-->
                    <!--</form>-->
                    <!--<form class="form-inline col-sm-2" id="wechatForm" action="#" method="post">-->
                        <!--<button class="btn btn-default" type="button" disabled>微信支付</button>-->
                    <!--</form>-->
                <!--</div>-->
            </div>
        </div>
    </div>

    <script th:src="@{/public/assets/js/http.js}" src="../../public/assets/js/http.js"></script>
    <script th:src="@{/public/assets/js/express.js}" src="../../public/assets/js/express.js"></script>
    <script th:src="@{/public/assets/js/jquery.min.js}" src="../../public/assets/js/jquery.min.js"></script>
    <script th:src="@{/public/assets/js/jquery.validate.min.js}" src="../../public/assets/js/jquery.validate.min.js"></script>
    <script th:src="@{/public/assets/layer/layer.js}" src="../../public/assets/layer/layer.js"></script>
    <script th:src="@{/public/assets/js/bootstrap.min.js}" src="../../public/assets/js/bootstrap.min.js"></script>
    <!-- 公用头部JS start -->
    <div th:replace="~{common/configJS :: configJS}">...</div>
    <!-- 公用头部JS end -->
    <script>
        let errorMsg = $('#errorMsg').val();
        let orderId = $('#orderId').val();
        let aliPayUrl = $('#aliPayUrl').val();
        // let total=0;
        $(function () {
            $("#order-sidebar").addClass('active');
            //
            // let alipayAlert = 'APP下载：https://sandbox.alipaydev.com/user/downloadApp.htm' + '&nbsp;&nbsp;' +
            //     '账号：uceskd4358@sandbox.com &nbsp;&nbsp; 登录、支付密码：111111';
            // layer.confirm(alipayAlert, {title:'务必使用沙箱APP和沙箱账号支付和登录', btn: ['明白了']}, function(){
            //     layer.msg('别再问我为啥无法登录了', {icon: 0});
            // });
            if (errorMsg !== ""){
                layer.msg(errorMsg, {icon:5});
                return;
            }
        });

        // function addPackage() {
        //     var html = '<div class="form-group">\n' +
        //         '                            <label class="col-sm-2 control-label">预估重量（单位：KG）</label>\n' +
        //         '                            <div class="col-sm-9">\n' +
        //         '                                <input type="number" class="form-control" name="price" onchange="updatePrice()" onkeyup="updatePrice()">\n' +
        //         '                            </div>\n' +
        //         '                        </div>';
        //     $("#packageForm").append(html);
        // }

        // function deletePackage() {
        //     $("#packageForm").children().last().remove();
        //     updatePrice();
        // }

        // 更新价格
        // function updatePrice() {
        //     total = 0;
        //     $("input[name='price']").each(function(){
        //         var weight = $(this).val();
        //         if(weight !== "") {
        //             if(!isNaN(weight)) {
        //                 weight = parseFloat(weight);
        //                 var tmp = 0;
        //                 // 如果小于500g，2元
        //                 if(weight < 0.5)
        //                     tmp = 2;
        //                 else if(weight < 1)
        //                     tmp = 3;
        //                 else if(weight >= 1)
        //                 // 向上取整
        //                     tmp = 4 * Math.ceil(weight);
        //                 total += tmp;
        //             } else {
        //                 // 如果不是数字，将input值修改为空
        //                 $(this).val("");
        //             }
        //         }
        //     });
        //     // 两位小数，四舍五入
        //     total = total.toFixed(2);
        //     $("span[lang='totalPrice']").each(function() {
        //         $(this).text(total);
        //     });
        // }

        function alipay() {
            // alert(aliPayUrl + orderId);
            window.location.href = aliPayUrl+orderId;
        }
    </script>
</body>
</html>